All Countries Drop Down List | HTML Select Country Name

Make money for being or staying online/internet.

You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!

This simple country dropdown list is freely available for you to copy and use in your project forms.

Tutorial

Html Markup

copy

	
<div class="container">

<h1>All countries Dropdown List  </h1>

<select id="countries" name="countries">  </select>  

</div>

For the value attribute, you can decide to either store or pass in the full country name, alpha2code, alpha3code, or callingCodes. etc

Example

Full country name: Uganda
Alpha2code: UG
Alpha3code: UGA
callingCodes: 256

Javascript Code

copy


//Listening/waitig for the document to be ready
document.addEventListener('DOMContentLoaded', () => {

const selectDrop = document.querySelector('#countries');
// const selectDrop = document.getElementById('countries');


fetch('http://restcountries.eu/rest/v2/all').then(res => {
return res.json();
}).then(data => {
let output = "";
data.forEach(country => {
  output += `
    <option value="${country.name}">${country.name}  </option>`;
})

selectDrop.innerHTML = output;

}).catch(err => {
console.log(err);
})


});

You can also clone the project via my Github repo: https://github.com/KasiitaTimothy/All-countries-dropdown-list

If this article was useful to you, please consider subscribing to my channel: Oston Code Cypher